let player;
let socket;
document.addEventListener('DOMContentLoaded', function() {
  document.removeEventListener('DOMContentLoaded', arguments.callee, false);
  window.username = 'unknown';
  const domElement = document.getElementById('player');
  player = videojs(domElement, {}, () => console.log('ready to play!'));
  socket = io.connect(window.location.pathname);
  function onPause() {
    socket.emit('newAction', {
      action: 'timeupdate',
      time: player.currentTime(),
      username: window.username
    })
  }
  player.on('play', () => {
    socket.emit('newAction', {
      action: 'play',
      time: player.currentTime(),
      username: window.username
    });
  player.off('timeupdate', onPause)
  });
  player.on('pause', () => {
    socket.emit('newAction', {
      action: 'pause',
      time: player.currentTime(),
      username: window.username
    });
    player.on('timeupdate', onPause)
  });
  socket.on('newMessage', data => {
    chatBox.appendMessage(data);
  });
  socket.on('newAction', obj => {
    switch(obj.action) {
      case 'play':
        player.currentTime(obj.time);
        player.play();
        chatBox.appendMessage(obj);
        break;
      case 'pause':
        player.currentTime(obj.time);
        player.pause();
        chatBox.appendMessage(obj);
        break;
      case 'timeupdate':
        if(player.currentTime() !== obj.time) {
          player.currentTime(obj.time);
          player.pause();
          chatBox.appendMessage(obj);
        }
        break;
    }

  });
  const createMessage = function(data) {
    const timeStamp = document.createElement('span');
    timeStamp.innerHTML = new Date(data.timeStamp).toLocaleTimeString();
    timeStamp.style.backgroundColor = 'grey';
    timeStamp.className = 'btn';
    const username = document.createElement('span');
    username.innerHTML = data.username;
    username.style.backgroundColor = 'orange';
    username.style.color = 'white';
    username.className = 'btn';
    const content = document.createElement('span');
    content.innerHTML = data.content;
    content.style.backgroundColor = 'green';
    content.style.color = 'white';
    content.className = 'btn';
    const li = document.createElement('li');
    li.className = 'list-group-item';
    li.appendChild(timeStamp);
    li.appendChild(username);
    li.appendChild(content);
    return li;
  };

  const chatBox = {
    box: document.getElementById('chatBox'),
    messages: function() {
      return this.box.childNodes
    },
    appendMessage: function(data) {
      if(this.messages().length > 8) {
        let child = this.box.firstChild;
        this.box.removeChild(child);
      }
      this.box.appendChild(createMessage(data));
    }
  };

});

const onSubmit = () => {
  const inputElm = document.getElementById('content');
  const content = inputElm.value;
  const usernameElm = document.getElementById('username');
  let username = usernameElm.value;
  console.log(username);
  if(content === '') {
    inputElm.value = "input something";
    return;
  }
  if(content === 'input something') {
    alert("input some shit, that's it.");
    return;
  }
  if(username !== '') {
    window.username = username;
  }
  socket.emit('postMessage', {
    content,
    username: window.username
  })
};


/**
 * Created by lzszone on 6/7/17.
 */
